import React, { Component } from "react";
import PropTypes from "prop-types";
import autobind from "autobind-decorator";
import Affix from "antd/lib/affix";

// components
import TodoItem from "./todoItem";

class Collapse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: false
    };
  }
  @autobind
  onCollapse() {
    window._rlog(`_todoList_collapse`)
    this.setState({
      collapse: !this.state.collapse
    });
  }
  render() {
    const {
      title = "",
      olist = {},
      date,
      corpId,
      userId,
      enableRegular,
      regularUrl
    } = this.props;

    return (
      <div>
        <div className="todo-collapse" onClick={this.onCollapse}>
          <span className="todo-collapse-title">{title}</span>
          <span className="todo-collapse-button">
            {this.state.collapse ? "展开" : "收起"}
          </span>
        </div>

        <div
          style={
            this.state.collapse ? { display: "none" } : { display: "block" }
          }
        >
          {Object.keys(olist)
            .sort((a, b) => a - b)
            .map(key =>
              olist[key].map((item, index) => (
                <TodoItem
                  {...item}
                  day={key}
                  isLast={index === olist[key].length - 1}
                  isFirst={index === 0}
                  date={date}
                  corpId={corpId}
                  currentUserId={userId}
                  enableRegular={enableRegular}
                  regularUrl={regularUrl}
                />
              ))
            )}
        </div>
      </div>
    );
  }
}

Collapse.propTypes = {
  title: PropTypes.string,
  olist: PropTypes.Object,
  date: PropTypes.string,
  corpId: PropTypes.string,
  userId: PropTypes.string,
  enableRegular: PropTypes.boolean,
  regularUrl: PropTypes.string
};
export default Collapse;
